<template>
	<view class="petDetails">
		<view class="topBack">
			<u-form :model="form" ref="uForm">
				<image class="petImg" :src="petDetail.head"></image>
				<view class="addPetTop addPetTopTow">
					<view class="addPetTopTitleDiv">
						<view class="addPetTopTitleLeft"></view>
						<text class="addPetTopTitleText">宠物信息</text>
					</view>

					<u-form-item label="宠物昵称" label-width="314rpx" prop="cwnc">
						<u-input v-model="petDetail.nickname"
							:placeholder="petDetail.nickname?petDetail.nickname: '暂无' " :disabled="true" />
					</u-form-item>

					<u-form-item label="宠物生日" label-width="314rpx" prop="intdate">
						<!-- 		<uniDataSelect :widthNum="286" :localdata="list" :modelValue="petDetail.birth_date"
							:clear="false" placeholder="请选择宠物生日" :disabled="true"></uniDataSelect> -->
						<u-input v-model="petDetail.birth_date"
							:placeholder="petDetail.birth_date ? petDetail.birth_date : '暂无'" :disabled="true"
							@click="modelState=true" />
					</u-form-item>
					<u-form-item label="宠物性别" label-width="314rpx">
						<uniDataSelect :widthNum="286" :localdata="sexList" :modelValue="petDetail.sex"
							:value="petDetail.sex" :clear="false" :placeholder="petDetail.sex?petDetail.sex:'暂无'"
							:disabled="true">
						</uniDataSelect>
					</u-form-item>
					<u-form-item label="宠物种类" label-width="314rpx">
						<u-input v-model="petDetail.cate_name"
							:placeholder="petDetail.cate_name?petDetail.cate_name: '暂无'" :disabled="true" />
					</u-form-item>
					<u-form-item label="宠物品种" label-width="314rpx">
						<u-input v-model="petDetail.breed" :placeholder="petDetail.breed?petDetail.breed:'暂无'"
							:disabled="true" />
					</u-form-item>
					<u-form-item label="备注" label-width="314rpx" label-position="top" :border-bottom="false">
						<u-input v-model="petDetail.remark" :placeholder="petDetail.remark?petDetail.remark:'暂无'"
							:disabled="true" />
					</u-form-item>
				</view>
				<view class="adressDiv" v-if="petDetail.status=='2'">
					<view class="adressDivTop">当前定位</view>
					<view class="adressDivBottom">
						<text class="adressDivBottomLeft">{{petDetail.address.address}}</text>
						<image class="adressDivBottomRight"
							src="https://chongwu.aitaoba.net/storage/uploads/20231118/aa37f04c6205eccd89bf43278c3dd657.png">
						</image>
					</view>
				</view>
				<view class="addPetTop addPetTopTow" v-if="petDetail.status=='2'">
					<view class="addPetTopTitleDiv">
						<view class="addPetTopTitleLeft"></view>
						<text class="addPetTopTitleText">拾遗者信息</text>
					</view>

					<u-form-item label="拾遗者称呼" label-width="314rpx">
						<u-input v-model="petDetail.kind_person.nickname"
							:placeholder="petDetail.kind_person.nickname?petDetail.kind_person.nickname:'暂无'"
							:disabled="true" />
					</u-form-item>
					<u-form-item label="联系方式1" label-width="314rpx">
						<u-input v-model="petDetail.kind_person.phone"
							:placeholder="petDetail.kind_person.phone?petDetail.kind_person.phone:'暂无'"
							:disabled="true" />
					</u-form-item>
					<u-form-item label="约见地址" label-width="314rpx" label-position="top" :border-bottom="false">
						<u-input v-model="petDetail.kind_person.address"
							:placeholder="petDetail.kind_person.address?petDetail.kind_person.address:'暂无'"
							:disabled="true" />
					</u-form-item>
				</view>

				<!-- 				<view class="addPetTop addPetTopTow" v-if="petDetail.card_code=='0'">
					<view class="addPetTopTitleDiv">
						<view class="addPetTopTitleLeft"></view>
						<text class="addPetTopTitleText">主人信息</text>
					</view>
				
					<view class="addPetBottomDiv">
						<text class="addPetBottomTopText">您的宝贝与防丢卡未绑定，暂时无法看到拾遗者信息</text>
						<button class="bindingButton">去绑定</button>
						<text class="addPetBottomBottomText">如您已购买防丢卡，请微信扫码添加宠物</text>
					</view>
				</view> -->
				<view class="addPetTop addPetTopTow">
					<view class="addPetTopTitleDiv">
						<view class="addPetTopTitleLeft"></view>
						<text class="addPetTopTitleText">主人信息</text>
					</view>

					<u-form-item label="主人称呼" label-width="314rpx">
						<u-input v-model="petDetail.user_call"
							:placeholder="petDetail.user_call?petDetail.user_call:'暂无'" :disabled="true" />
					</u-form-item>
					<u-form-item label="联系方式1" label-width="314rpx">
						<!-- <u-input v-model="form.cwnc" placeholder="请填写联系方式1" :disabled="true" /> -->
						<u-input v-model="petDetail.phone_1" :placeholder="petDetail.phone_1?petDetail.phone_1:'暂无'" />
					</u-form-item>
					<u-form-item label="联系方式2" label-width="314rpx">
						<!-- <u-input v-model="form.cwnc" placeholder="请填写联系方式2" :disabled="true" /> -->
						<u-input v-model="petDetail.phone_2" :placeholder="petDetail.phone_2?petDetail.phone_2:'暂无'" />
					</u-form-item>
				</view>
				<view class="kongbai"></view>
			</u-form>
		</view>
		<view class="Retrieved" @tap="retrievedPopOpen">
			<image class="retrievedImg"
				src="https://chongwu.aitaoba.net/storage/uploads/20231118/91b541bad3d89026c9909aa1b359bfc2.png"
				v-if="petDetail.status=='2'"></image>
			<!-- v-if="petDetail.status=='2'" -->
			<!-- 	<image class="retrievedImg"
				src="https://chongwu.aitaoba.net/storage/uploads/20231118/b3cb214df459d2aa094ecb1cd035663e.png" v-else>
			</image> -->
		</view>
		<view class="bottomView">
			<view class="deleteButton" @tap="deledeState=true">
				<image class="deleteIcon"
					src="https://chongwu.aitaoba.net/storage/uploads/20231118/56460fc9b7faffd1996b6a4edfc7983d.png">
				</image>
				<text class="deleteText">删除</text>
			</view>
			<view class="deleteButton eadri" @tap="editFun">
				<text class="deleteText">编辑宠物信息</text>
			</view>
		</view>
		<!-- 找回弹窗 -->
		<!--  -->
		<view class="retrievedPopDiv" v-if="retrievedPopState" @tap="retrievedPopState=false">
			<view class="retrievedPopLi"
				style="background: url('https://chongwu.aitaoba.net/storage/uploads/20231118/b3a53c1157a633dceb4ff7bbb2ed191f.png') no-repeat;background-size: 100% 100%;">
				<text class="textTop">Hello！</text>
				<text class="textIn">宠主</text>
				<text class="textBottom">找回您的宝贝之后将清除拾遗者信息，<text class="colorFontClass">您的宠物已
						找回了吗</text>？</text>
				<button class="stillSearching" @tap="retrievedPopState=false">没有，还在寻找</button>
				<button class="retrieved" @tap="goRetrieved">是的，我已找回</button>
			</view>
		</view>
		<!-- 删除弹窗 -->
		<view class="retrievedPopDiv" v-if="deledeState" @tap="deledeState=false">
			<view class="deletePopLi"
				style="background: url('https://chongwu.aitaoba.net/storage/uploads/20231118/40b56d200638ef85cb80ad2e0762d364.png') no-repeat;background-size: 100% 100%;">
				<text class="deletePopLiTopText">删除宠物信息之后将无法恢复，您确定需要删除吗？</text>
				<button class="qxButton" @tap="deledeState=false">取消</button>
				<button class="qxButton qrButton" @tap="deleteFun">确认</button>
			</view>
		</view>

	</view>
</template>

<script>
	import uniDataSelect from '@/components/uniDataSelect/uniDataSelect.vue';
	import {
		petDetail,
		petDel,
		Retrieved
	} from '@/api/pet.js';
	export default {
		components: {
			uniDataSelect,
		},
		data() {
			return {
				state: false,
				petDetail: {},
				itemData: {},
				deledeState: false,
				binding: false,
				retrievedPopState: false,
				form: {
					img: 'https://chongwu.aitaoba.net/storage/uploads/20231118/38a9c27b09838d4342f9d37678f3236f.png',
					name: '',
					intro: '',
					sex: '',
					intdate: '',
				},
				rules: {
					img: [{
						required: true,
						message: '请上传宠物照片',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					cwnc: [{
						required: true,
						message: '请输入宠物昵称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					intdate: [{
						required: true,
						message: '请选择宠物生日',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					intro: [{
						min: 5,
						message: '简介不能少于5个字',
						trigger: 'change'
					}]
				},

				checkboxList: [{
						name: '苹果',
						checked: false,
						disabled: false
					},
					{
						name: '雪梨',
						checked: false,
						disabled: false
					},
					{
						name: '柠檬',
						checked: false,
						disabled: false
					}
				],
				radioList: [{
						name: '鲜甜',
						disabled: false
					},
					{
						name: '麻辣',
						disabled: false
					}
				],
				radio: '',
				switchVal: false,
				list: [{
					text: '2021-11-05',
					value: '2021-11-05'
				}, {
					text: '2021-12-05',
					value: '2021-12-05'
				}],
				sexList: [{
					text: '囡囡',
					value: '1'
				}, {
					text: '仔仔',
					value: '2'
				}],
				telList: [{
					text: '电话',
					value: '1'
				}, {
					text: 'qq',
					value: '2'
				}],
				isRetrieved: false,

			};
		},

		/**
		 * 跳转到个人中心
		 */
		onBackPress(e) {

		},
		onPullDownRefresh() {

		},
		onShow() {
			this.isRetrieved = getApp().globalData.isRetrieved;
		},

		onLoad(options) {
			this.itemData = JSON.parse(decodeURIComponent(options.item))
			this.getPetDetail(JSON.parse(decodeURIComponent(options.item)))
			console.log(options, 'zhelilsls')
			// this.itemData = JSON.parse(decodeURIComponent(options).item);
			// console.log(JSON.parse(decodeURIComponent(options).item), '看看页面过来的id')
			// this.getPetDetail(JSON.parse(decodeURIComponent(options).item));
			// this.itemData = JSON.parse(options.item);
			// console.log(JSON.parse(options.item), '看看页面过来的id')
			// this.getPetDetail(JSON.parse(options.item));
		},
		watch: {

		},
		methods: {
			editFun() {
				uni.navigateTo({
					url: "/pages/addPet/addPet?item=" + JSON.stringify(this.itemData)
				})
			},
			deleteFun() {
				let data = {
					id: this.itemData.id
				};
				petDel(data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '删除成功',

						})
						uni.navigateBack(-1);
					}
				}).catch();
			},
			getPetDetail(item) {
				let data = {
					id: item.id
				};

				petDetail(data).then((res) => {
					console.log(res, '宠物详情666')
					if (res.code == 200) {
						this.petDetail = res.data;
					}
				}).catch((res) => {})
			},
			goRetrieved() {
				// 已找回
				let data = {
					id: this.itemData.id
				};
				console.log(data, '看看入参')
				Retrieved(data).then((res) => {
					if (res.code == 200) {
						uni.navigateTo({
							url: "/pages/retrieved/retrieved?item=" + encodeURIComponent(JSON.stringify(
								this.itemData))
						})
					}
				}).catch()

			},
			retrievedPopOpen() {
				// Retrieved({
				// 	id: this.petDetail.id
				// }).then(res => {
				// 	uni.showToast({
				// 		title: res.msg,
				// 		icon: 'none'
				// 	})
				// })
				if (this.petDetail.status == '2') {
					this.retrievedPopState = true;
				}

			},
			changeFun(e) {
				console.log(e, '看看名称')
				this.form.intdate = e;
				console.log(this.form.intdate, '看看选中的宠物生日')
				// 	this.details.carNumber = e;
				// 	let indexOf;
				// 	this.list.forEach((item,index)=>{
				// 		if(item.value==this.details.reportName){
				// 			indexOf=1;
				// 		}
				// 	})

				// 	if(this.details.reportName==undefined||this.details.reportName==''||indexOf==1){
				// 		this.$set(this.details,'reportName',e)

				// 	}

			},
		},
	};
</script>

<style lang="scss" scoped>
	.petDetails {
		width: 100%;
		display: flex;
		flex-direction: column;
		// padding-bottom: 170rpx;
		// box-sizing: border-box;
	}

	.topBack {
		width: 750rpx;
		height: 257rpx;
		background: linear-gradient(180deg, #FAE24E 0%, rgba(250, 226, 78, 0) 100%);
		border-radius: 0rpx;
		padding: 40rpx 30rpx 0rpx 30rpx;
		box-sizing: border-box;
	}

	.petImg {
		width: 690rpx;
		height: 460rpx;
		background: #FFFADB;
		border-radius: 20rpx;

	}

	.addPetTop {
		width: 690rpx;
		// height: 355rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		flex-direction: column;
		padding: 43rpx 39rpx 46rpx 21rpx;
		box-sizing: border-box;
	}

	.addPetTopOne {
		padding-bottom: 46rpx !important;
	}

	.addPetTopTow {
		padding-bottom: 59rpx !important;
		margin-top: 20rpx;
	}

	.addPetTopTitleDiv {
		display: flex;
		align-items: center;
	}

	.addPetTopTitleLeft {
		width: 8rpx;
		height: 30rpx;
		background: #FAE24E;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		border: 1rpx solid #683518;
	}

	.addPetTopTitleText {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		margin-left: 9rpx;
	}

	.addPetBottom {
		display: flex;
		align-items: center;
		padding-left: 18rpx;
		box-sizing: border-box;
		margin-top: 21rpx;
	}


	.uploadDiv {
		width: 200rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		border: 1rpx dashed #B6AAA3;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.uploadImg {
		width: 200rpx;
		height: 200rpx;
	}

	.uploadLiDiv {
		width: 57.81rpx;
		height: 56.46rpx;

	}

	.marginTop20 {
		margin-top: 20rpx;
	}

	.kongbai {
		width: 100%;
		// height: 162rpx;
		height: 222rpx;
	}

	.submitButtonClass {
		width: 750rpx;
		height: 98rpx;
		background: #FED24C;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #5D5353;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 3;
	}

	::v-deep .addPetBottom .u-form-item__message {
		padding-left: 30rpx !important;
	}

	.adressDiv {
		width: 690rpx;
		height: 156rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		padding: 30rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
	}

	.adressDivTop {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
	}

	.adressDivBottom {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 32rpx;
	}

	.adressDivBottomLeft {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
	}

	.adressDivBottomRight {
		width: 30rpx;
		height: 36rpx;
	}

	.kongbai {
		width: 100%;
		height: 170rpx;
	}

	.Retrieved {
		width: 320rpx;
		height: 97rpx;
		outline: none;
		position: fixed;
		left: 211rpx;
		bottom: 162rpx;
		z-index: 3;
		margin: 0;
		padding: 0;
		background: none;
		border: none;
	}

	.retrievedImg {
		width: 320rpx;
		height: 97rpx;
	}

	.bottomView {
		width: 750rpx;
		height: 98rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		z-index: 4;
	}

	.deleteButton {
		width: 259rpx;
		height: 98rpx;
		background: #FED24C;
		border-radius: 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.eadri {
		width: 491rpx;

		background: #FFFFFF;

	}

	.deleteIcon {
		width: 30rpx;
		height: 30rpx;
	}

	.deleteText {
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #2E2908;
	}

	.retrievedPopDiv {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 5;
	}

	.retrievedPopLi {
		width: 750rpx;
		height: 808rpx;

		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 6;

		animation: heightTransition 0.1s ease-in-out;
	}

	.deletePopLi {
		width: 750rpx;
		height: 780rpx;

		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 6;

		animation: heightDelete 0.1s ease-in-out;
	}

	.deletePopLiTopText {
		width: 578rpx;
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
		text-align: center;
		position: absolute;
		left: 86rpx;
		top: 334rpx;
		z-index: 7;
	}

	.qxButton {
		width: 300rpx;
		height: 88rpx;
		background: #F1F2F6;
		border-radius: 20rpx;
		outline: none;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #2E2908;
		text-align: center;
		line-height: 88rpx;
		position: absolute;
		left: 64rpx;
		top: 553rpx;
		z-index: 7;

	}

	.qrButton {
		background: #FED24C;
		left: 386rpx;
	}

	@keyframes heightDelete {
		0% {
			height: 0;
		}

		50% {
			height: 390rpx;
		}

		100% {
			height: 780rpx;
		}
	}

	@keyframes heightTransition {
		0% {
			height: 0;
		}

		50% {
			height: 404rpx;
		}

		100% {
			height: 808rpx;
		}
	}

	.textTop {
		font-size: 56rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		position: absolute;
		left: 51rpx;
		top: 293rpx;
		z-index: 7;
	}

	.textIn {
		font-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		position: absolute;
		left: 51rpx;
		top: 389rpx;
		z-index: 7;
	}

	.textBottom {
		width: 616rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
		position: absolute;
		left: 51rpx;
		top: 457rpx;
		z-index: 7;
	}

	.colorFontClass {
		color: #FED24C;
	}

	.stillSearching {
		width: 300rpx;
		height: 88rpx;
		background: #F1F2F6;
		border-radius: 20rpx;
		border: none;
		outline: none;
		text-align: center;
		line-height: 88rpx;
		position: absolute;
		left: 64rpx;
		top: 615rpx;
		z-index: 7;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #2E2908;
	}

	.retrieved {
		width: 300rpx;
		height: 88rpx;
		background: #FED24C;
		border-radius: 20rpx;
		border: none;
		outline: none;
		text-align: center;
		line-height: 88rpx;
		position: absolute;
		right: 64rpx;
		top: 615rpx;
		z-index: 7;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #2E2908;
	}

	.addPetBottomDiv {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50rpx;
	}

	.addPetBottomTopText {
		width: 392rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
	}

	.bindingButton {
		width: 320rpx;
		height: 72rpx;
		background: linear-gradient(178deg, #FF6931 0%, #F0BB26 100%);
		box-shadow: 0rpx 6rpx 12rpx 1rpx rgba(63, 29, 3, 0.1608);
		border-radius: 64rpx;

		border: 2rpx solid #683518;
		outline: none;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #683518;
		text-align: center;
		line-height: 72rpx;
		margin-top: 36rpx;
	}

	.addPetBottomBottomText {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
		margin-top: 26rpx;
	}
</style>